<template>
    <div class="headStyle comFlex comFlexCenter flexJustEnd">
        <div style="width: 28%;" class="comFlex comFlexCenter">
            <el-icon size="25" @mouseover="showInput" v-show="!visible" color="white">
                <Search />
            </el-icon>
            <span class="comFontSize20 fontClass comFontWhite comLeft16">搜索</span>
            <!-- <el-input style="width: 240px;" v-show="visible" @mouseleave="hideInput"></el-input> -->
             <el-badge :value="200" :max="99" class="comLeft20">
                <div class="comFlex">
                    <el-icon size="25" color="white"><ChatDotSquare /></el-icon>
                    <span class="comFontSize20 fontClass comFontWhite comLeft16">消息</span>
                </div>
            </el-badge>
            <div class="user comLeft16 comFlex comFlexCenter comJustCenter">
                 <el-icon size="25" color="white"><User /></el-icon>
            </div>
           
             <el-dropdown class="comLeft16">
                <span class="comFontWhite">
                    昵称
                    <el-icon size="20" color="white">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>测试</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
            </el-dropdown>
            <el-button text @click="logout"><span class="comFontWhite">退出</span></el-button>
        </div>
    </div>
</template>
<script setup>
import { Search, ChatDotSquare, User} from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
import { ref ,defineProps} from 'vue';
const logout = () => {
    localStorage.removeItem('token')
    localStorage.removeItem('refresh_token')
    router.push('/login')
}
const visible = ref(false)
const showInput = () => {
    visible.value = true
}
const hideInput = () => {
    visible.value = false
}
defineProps({
    isOpen :{
        type : Boolean,
        default : true
    },
    username:{
        type : String,
        default :'admin'
    }
})

const emits = defineEmits(["open"])
const open = () => {
    emits("open")
}
</script>
<style scoped>
.headStyle{
    width: 100%;
    height: 80px;
    background: #188BFF;
    line-height: 20px;
    color: rgba(16,16,16,1);
    font-size: 14px;
    box-shadow: 0px 1px 4px 0px rgba(0,21,41,0.12);
    font-family: -regular;
    border: 0px solid rgba(187,187,187,1);
}
.user{
    width: 48px;
    height: 48px;
    background: #DFE2E7;
    border-radius: 50%;
}
</style>